import Divider from 'antd/es/divider';
import { AppStore } from '../../../../store';
import { useEffect, useState } from 'react';;
import { ButtonProps } from 'antd/es/button/button'
import { ViewType, CameraType } from '@manycore/custom-ksg-viewer-sdk';

const ViewTypeText = {
    [ViewType.Front]: '前视图',
    [ViewType.Back]: '后视图',
    [ViewType.Left]: '左视图',
    [ViewType.Right]: '右视图',
    [ViewType.Top]: '顶视图',
    [ViewType.Bottom]: '底视图',
}


export function CameraDemo(props: {
    createButton: (infos: Array<{
        /** buttonName */
        name: string,
        onClick: () => void;
        buttonProps?: ButtonProps;
    }>) => JSX.Element[]
}) {
    const { createButton } = props;
    const { appState: { app } } = AppStore.useContainer();
    const [cameraType, setCameraType] = useState<CameraType>(CameraType.Perspective);

    useEffect(() => {
        app!.cameraService.switchCamera(cameraType);
    }, [cameraType])

    const CApis = [
        {
            name: `切换至${cameraType === CameraType.Perspective ? '正交' : '透视'}相机`,
            onClick: () => {
                const nextCameraType = cameraType === CameraType.Perspective ? CameraType.Orthographic : CameraType.Perspective;
                setCameraType(nextCameraType);
            }
        },
        ...Object.entries(ViewTypeText).map(([key, text]) => {
            return {
                name: text,
                onClick: () => app?.cameraService.switchView(key as ViewType)
            }
        })
    ]



    return <>
        <Divider> 相机</Divider>
        {createButton(CApis)}
    </>
}